﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>您正在做的业务是：人力资源--调动管理--调动查询</title>
    <!-- 引入Vue和Element Plus -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>

    <style>

        .form-button {
            text-align: center;
            margin: 30px 0;
        }

        .bordered-table {
            width: 70%;
            border-collapse: collapse;
        }

            .bordered-table input {
                width: 500px;
                padding: 6px;
            }

            .bordered-table th,
            .bordered-table td {
                border: 1px solid #ccc;
                padding: 8px;
            }

            .bordered-table th {
                background-color: #f7d08b;
                text-align: right;
                width: 200px;
                font-weight: normal;
            }

        .date-input-container {
            display: flex;
        }




            .date-input-container input {
                flex: 1;
                margin: 0;
            }

            .date-input-container span {
                margin: 0 10px;
                font-weight: bold;
            }


        body {
            background-color: #FFFFCC;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span>您正在做的业务是：人力资源--调动管理--调动查询</span>

        <form>

            <div class="form-button">
                <el-button type="button" v-on:click="handCX">查询</el-button>&nbsp;
                @* <input type="button" value="搜索" /> *@
            </div>

            <table class="bordered-table">
                <tr>
                    <th>I,II,III级机构名称</th>
                    <td>

                        <el-cascader v-model="selectedOrg"
                                     :options="orgOptions"
                                     :props="cascaderProps"
                                     placeholder="请选择机构"
                                     clearable
                                     v-on:change="handleOrgChange"
                                     class="w-full"
                                     style="width: 100%;">
                        </el-cascader>


                        <!-- 添加隐藏字段用于表单提交 -->
                        <input type="hidden" name="first_kind_id" :value="selectedOrg[0]">
                        <input type="hidden" name="second_kind_id" :value="selectedOrg[1]">
                        <input type="hidden" name="third_kind_id" :value="selectedOrg[2]">
                        <input type="hidden" name="first_kind_name" :value="firstKindName">
                        <input type="hidden" name="second_kind_name" :value="form.secondKindName">
                        <input type="hidden" name="third_kind_name" :value="form.thirdKindName">


                    </td>
                </tr>
                <tr>
                    <th>请选择职位分类名称 和 职位名称 </th>
                    <td>

                        <el-cascader v-model="selectedJob"
                                     :options="jobOptions"
                                     :props="jobCascaderProps"
                                     placeholder="请选择职位分类和职位"
                                     clearable
                                     v-on:change="handleJobChange"
                                     class="w-full"
                                     style="width: 100%;">
                        </el-cascader>

                        <!-- 添加隐藏字段用于表单提交 -->
                        <input type="hidden" name="human_major_kind_id" :value="selectedJob[0]">
                        <input type="hidden" name="human_major_kind_name" :value="jobCategoryName">
                        <input type="hidden" name="human_major_id" :value="selectedJob[1]">
                        <input type="hidden" name="hunma_major_name" :value="jobName">


                    </td>
                </tr>
                <tr>
                    <th>
                        请输入建档时间
                    </th>

                    <td>
                        <div class="date-input-container">

                            <el-input type="date" v-model="form.start" class="date-input"></el-input>

                        </div>
                        至
                        <div>
                            <el-input type="date" v-model="form.end" class="date-input"></el-input>
                        </div>
                    </td>

                </tr>

            </table>

        </form>



    </div>

    <script>
          const { createApp, ref, onMounted,reactive ,ElMessage } = Vue;

        const app=createApp({
           setup() {

               const form=reactive({
                     firstKindName: '',         // I级机构名称
                     secondKindName: '',        // II级机构名称
                     thirdKindName: '',         // III级机构名称
                     jobCategoryName: '',     // 职位分类名称
                     jobName: '',            // 职位名称
                     start:'',                  //建档开始时间
                     end:'',                    //建档结束时间
               })


                   // 机构选择相关
                  const selectedOrg = ref([]);  // 选中的机构ID数组
                  const orgOptions = ref([]);   // 级联选择器的选项数据


                  // 级联选择器配置
                  const cascaderProps = ref({
                      expandTrigger: 'click',
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: false
                  });

                  // 获取机构数据
                  const fetchOrgData = async () => {
                      try {
                           const response = await axios.get('/FirstLevelCX');
                          console.log(response.data)
                          orgOptions.value = response.data;
                           console.log('级联数据:', orgOptions.value); // 确保数据非空

                      } catch (error) {
                          console.error('获取机构数据失败:', error);
                          ElMessage.error('获取机构数据失败，请重试');
                      }
                  };

                  // 处理级联选择变化
                  const handleOrgChange = (value) => {
                     // 原有逻辑...
                   console.log('各级机构名称：', form.firstKindName, form.secondKindName, form.thirdKindName);

                               // 清空名称
                     form.firstKindName = form.secondKindName = form.thirdKindName = '';

                  // 处理I级
                     if (value[0]) {
                 const firstNode = orgOptions.value.find(node => node.id === value[0]);
                     if (firstNode) {
                  form.firstKindName = firstNode.name;

                  // 处理II级
                  if (value[1]) {
                      const secondNode = firstNode.children.find(node => node.id === value[1]);
                      if (secondNode) {
                          form.secondKindName = secondNode.name;

                          // 处理III级
                          if (value[2]) {
                              const thirdNode = secondNode.children.find(node => node.id === value[2]);
                              form.thirdKindName = thirdNode?.name || '';
                          }
                      }
                  }
                     }

                     }

                          // 打印最终结果
                     console.log('---------------------');
                     console.log('选中机构名称：');
                     console.log('I级:', form.firstKindName);
                     console.log('II级:', form.secondKindName);
                     console.log('III级:', form.thirdKindName);
                     console.log('---------------------');

                  };

                     // 职位级联选择相关
          const selectedJob = ref([]);        // 选中的职位级联ID数组
          const jobOptions = ref([]);         // 职位级联选择器的选项数据
          const jobCascaderProps = ref({
              expandTrigger: 'click',
              value: 'id',
              label: 'name',
              children: 'children',
              checkStrictly: false
          });

          // 获取职位级联数据
          const fetchJobData = async () => {
              try {
                  const response = await axios.get('/JobCategoryCX');
                  jobOptions.value = response.data;
                  console.log('职位级联数据:', jobOptions.value);
              } catch (error) {
                  console.error('获取职位数据失败:', error);
                  ElMessage.error('获取职位数据失败，请重试');
              }
          };

          // 处理职位级联选择变化
          const handleJobChange = (value) => {
              // 清空名称
              form.jobCategoryName = form.jobName = '';

              // 处理职位分类（第1级）
              if (value[0]) {
                  const categoryNode = jobOptions.value.find(node => node.id === value[0]);
                  if (categoryNode) {
                      form.jobCategoryName = categoryNode.name;

                      // 处理职位名称（第2级）
                      if (value[1]) {
                          const jobNode = categoryNode.children.find(node => node.id === value[1]);
                          form.jobName = jobNode?.name || '';
                      }
                  }
              }

              // 打印结果
              console.log('---------------------');
              console.log('选中职位信息：');
              console.log('职位分类:', form.jobCategoryName);
              console.log('职位名称:', form.jobName);
              console.log('---------------------');
          };



           const handCX =async()=>{


                         //检查所有条件是否都为空
          const tj = !form.firstKindName && !form.secondKindName && !form.thirdKindName &&
                            !form.jobCategoryName && !form.jobName &&
                            !form.start && !form.end;

               if (tj) {
             // 所有条件都为空，直接跳转到结果页面并查询所有
              console.log('无任何查询条件，跳转到结果页面查询所有数据');
               const pageSize = 2; //可以从组件状态中获取
          const currentPage = 1; //可以从组件状态中获取

             window.location.href = `/DDSelect/Index?pageSize=${pageSize}&currentPage=${currentPage}`;


              return;

          }


                          const params = {
                               first_kind_name: form.firstKindName,
                               second_kind_name: form.secondKindName,
                               third_kind_name: form.thirdKindName,
                               major_kind_name: form.jobCategoryName,
                               major_name: form.jobName,
                               regist_time:form.start ? new Date(form.start) : null,
                               check_time:form.end ? new Date(form.end) : null,
                               PageNumber: 1, //初始页码
                               PageSize: 2  // 初始页大小

                          };

                      const response = await axios.post('/DDSelect/Search', params);

                  if (response.data) {
                     // 保存查询结果和条件到sessionStorage
                      sessionStorage.setItem('searchResults', JSON.stringify(response.data.items));
                      sessionStorage.setItem('searchParams', JSON.stringify(params));
                      sessionStorage.setItem('totalCount', response.data.totalCount);

                      console.log('数据结果',response.data);
                        console.log('数据结果1',response.data.items);
                         console.log('数据总数', response.data.totalCount);
                           console.log('数据条件', JSON.stringify(params, null, 2));
                      //跳转到结果页面
                       window.location.href = '/DDSelect/CXXS';
                  }


            }



                  fetchOrgData();
                  fetchJobData();


                  return{

                      form,
                      selectedOrg,
                      orgOptions,
                      cascaderProps,
                      handleOrgChange,
                      selectedJob,
                      jobOptions,
                      jobCascaderProps,
                      handleJobChange,
                      handCX,

                  }



           }

         })
          app.use(ElementPlus).mount('#app');
    </script>

</body>
</html> 